<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>问卷数据</title>

    <!-- 问卷的图标 -->
    <link rel="icon" sizes="32*32" href="/static/image/R-C.png">

    <!-- 引进css -->
    <link rel="stylesheet" href="/static/css/data/datas.css">
    <link rel="stylesheet" href="/static/css/edit/base.css">

    <!-- echarts地址 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.4.1/echarts.min.js"></script>

    <!-- jqury地址 -->
    <script src="https://cdn.acwing.com/static/jquery/js/jquery-3.3.1.min.js"></script>

</head>

<body>
    <div class="data-body">
        <!-- nav -->
        <div class="new-questionnaire-header" style="color: white;">
            <div class="new-questionnaire-special" style="color: white;">
                <div style="color: orange;">?</div>
            </div>
            <div class="new-questionnaire-header-manage" style="color: white;">问卷管理</div>
            <div class="new-questionnaire-header-my" style="color: white;">我的问卷</div>
        </div>

        <!-- 主体 -->
        <div class="content">
            <header>
                <div class="return">
                    < 返回</div>
                        <h1>这里是标题</h1>
                        <p>此统计分析只包含完整回收的数据</p>
            </header>

            <div class="line"></div>

            <section>
                <div class="data">
                    <div>
                        <div>
                            <span class="span01">Q1</span><span class="span02">单选题</span><span
                                class="span03">数据占比</span>
                        </div>
                        <div>
                            <span class="span01">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span
                                class="span02">选项一</span><span class="tiao span03">
                                <div class="div-1"></div>
                            </span> 35%
                        </div>
                        <div>
                            <span class="span01">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span
                                class="span02">选项二</span><span class="tiao span03">
                                <div class="div-2"></div>
                            </span> 65%
                        </div>
                    </div>
                </div>
                <div class="data data02">
                    <div>
                        <div>
                            <span class="span01">Q2</span><span class="span02">多选题</span><span
                                class="span03">数据占比</span>
                        </div>
                        <div class="shui">
                            <div class="left">
                                <div>选项一</div>
                                <div>选项二</div>
                                <div>选项三</div>
                                <div>选项四</div>
                            </div>
                            <div class="right" id="main"></div>
                        </div>
                    </div>
                </div>
                <div class="data">
                    <div>
                        <div>
                            <span class="span01">Q3</span><span class="span02">文本题</span><span
                                class="span03">有效回答占比</span>
                        </div>
                        <div class="specs">
                            <span class="span01">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span
                                class="span02">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="tiao span03">
                                <div class="div-3"></div>
                            </span> 75%
                        </div>
                    </div>
                </div>
                <div class="data">
                    <div>
                        <div>
                            <span class="span01">Q4</span><span class="span02">单选题</span><span
                                class="span03">数据占比</span>
                        </div>
                        <div>
                            <span class="span01">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span
                                class="span02">选项一</span><span class="tiao span03">
                                <div class="div-1"></div>
                            </span> 35%
                        </div>
                        <div>
                            <span class="span01">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span
                                class="span02">选项二</span><span class="tiao span03">
                                <div class="div-2"></div>
                            </span> 65%
                        </div>
                    </div>
                </div>
            </section>

            <div class="line"></div>

            <!-- 尾部 -->
            <footer>
                <div>
                    <div>< 返回</div>
                </div>
            </footer>
        </div>
    </div>

    <!-- js -->
    <script type="text/javascript">
        // based on prepared DOM, initialize echarts instance
        var myChart = echarts.init(document.getElementById('main'));

        // specify chart configuration item and data
        option = {
            series: [
                {
                    type: 'pie',
                    data: [
                        {
                            value: 300,
                            name: '选项一'
                        },
                        {
                            value: 320,
                            name: '选项二'
                        },
                        {
                            value: 380,
                            name: '选项三'
                        },
                        {
                            value: 500,
                            name: '选项四'
                        },
                    ],
                    roseType: 'area'
                }
            ]
        };

        // use configuration item and data specified to show chart
        myChart.setOption(option);
    </script>

    <script type="module">
        import {} from "/static/js/manage/manage.js";
    </script>
</body>

</html>